<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-row>
        <el-col :span="6">
          <el-button class="filter-item" size="small" style="margin-left: 10px;" type="primary" v-waves @click="importData" icon="el-icon-upload2">导 入</el-button>
        </el-col>
        <el-col :span="18" style="text-align: right">
          <el-input size="small" style="width: 200px" class="filter-item more-search" placeholder="车架号快捷查询" v-model="search.condition.lotNo1"
                    @keyup.enter.native="list"></el-input>
          <el-button class="filter-item" size="small" type="primary" v-waves icon="el-icon-circle-plus-outline" @click="moreClick">更 多</el-button>
          <el-dropdown trigger="click" :hide-on-click=false style="float: right;margin-left: 10px">
            <span class="el-dropdown-link">
              <el-button class="filter-item" size="small" type="primary" v-waves>
                选择列
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-checkbox-group v-model="columnCheckList">
                  <el-checkbox label="houseName">仓库</el-checkbox>
                  <el-checkbox label="ownerId">客户</el-checkbox>
                  <el-checkbox label="materielCode">车型/物料编码</el-checkbox>
                  <el-checkbox label="lotNo1">车架号</el-checkbox>
                  <el-checkbox label="materielName">车型描述/物料名称</el-checkbox>
                  <el-checkbox label="lotNo3">颜色编码</el-checkbox>
                  <el-checkbox label="lotNo4">车型编码</el-checkbox>
                  <el-checkbox label="areaName">库区</el-checkbox>
                  <el-checkbox label="locationCode">库位</el-checkbox>
                </el-checkbox-group>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
      <div style="clean:both"></div>
      <!--更多内容-->
      <div v-show="moreSearchVisible" style="height: auto;margin-top: 10px;">
        <el-form ref="form" :model="search.condition" label-width="120px" :inline="true">
          <el-form-item label="客户">
            <el-input  placeholder="请输入客户" class="w200" clearable v-model="search.condition.ownerId" ></el-input>
          </el-form-item>
          <el-form-item label="车型/物料编码">
            <el-input  placeholder="请输入车型/物料编码" class="w200" clearable v-model="search.condition.styleName"></el-input>
          </el-form-item>
          <el-form-item label="车架号">
            <!--<el-input placeholder="请输入车架号" class="w200" clearable v-model="search.condition.lotNo1"></el-input>-->
            <el-input type="textarea" :rows="2" style="width: 250px"
                      v-model="search.condition.lotNo1"  placeholder="请输入车架号, 以逗号来分隔"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="list" style="margin-left: 10px">查询</el-button>
            <el-button type="primary" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!--列表-->
    <el-table ref="stockInitTable" :data="preparationList" v-loading="listLoading" element-loading-text="加载中" border fit highlight-current-row style="width: 100%;margin-top:5px">
      <el-table-column type="selection" width="35"></el-table-column>
      <el-table-column :key="key" align="center" :width="value.width" v-for='(value,key) in columnList' :label="value.title">
        <template slot-scope="scope">
          <div>{{ scope.row[value.key] }}</div>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination :current-page.sync="search.current" :page-sizes="[10,20,30,50]" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :page-size="search.size" :total="search.total" layout="total, sizes, prev, pager, next, jumper" ></el-pagination>
    </div>

    <!--导入弹窗-->
    <el-dialog title="期初库存导入" :visible.sync="dialogVisible" width="75%" :before-close="handleClose">
      <upload-excel-component @on-selected-file='selected'></upload-excel-component>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button class="filter-item" size="small" style="margin-left: 10px;" type="primary"
                 v-waves icon="el-icon-upload2" @click="confirmImport" :disabled="importLoading">导入</el-button>
      <el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
        <el-table-column v-for="item in tableHeader" :prop="item" :label="item" :key='item '></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import UploadExcelComponent from '@/components/UploadExcel/index.vue'
import * as stockAPI from '@/api/stock/initStock'
import waves from '@/directive/waves' // 水波纹指令
const defaultColumn = [
  { key: 'houseName', title: '仓库', width: '' },
  { key: 'ownerId', title: '客户', width: '' },
  { key: 'materielCode', title: '车型/物料编码', width: '' },
  { key: 'lotNo1', title: '车架号', width: '' },
  { key: 'materielName', title: '车型描述/物料名称', width: '' },
  { key: 'lotNo3', title: '颜色编码', width: '' },
  { key: 'lotNo4', title: '车型编码', width: '' },
  { key: 'areaName', title: '库区', width: '' },
  { key: 'locationCode', title: '库位', width: '' }
]

export default {
  components: { UploadExcelComponent },
  name: 'uploadExcel',
  directives: {
    waves
  },
  data() {
    return {
      search: {
        current: 1,
        size: 10,
        total: 0,
        condition: {
          lotNo1: null,
          ownerId: null,
          styleName: null,
          houseId: null
        }
      },
      columnList: defaultColumn,
      columnCheckList: [
        'houseName',
        'ownerId',
        'materielCode',
        'lotNo1',
        'materielName',
        'lotNo3',
        'lotNo4',
        'areaName',
        'locationCode'
      ],
      moreSearchVisible: false,
      preparationList: [],
      listLoading: false,
      importLoading: false,
      tableData: [],
      tableHeader: [],
      dialogVisible: false
    }
  },
  created() {
    this.list()
  },
  watch: {
    columnCheckList(valArr) {
      this.columnList = defaultColumn.filter(v => {
        for (let i = 0; i < valArr.length; i++) {
          if (v.key === valArr[i]) {
            return v
          }
        }
      })
    }
  },
  methods: {
    list() {
      const that = this
      // 更多
      const queryParam = {}
      that.search.condition.houseId = this.$store.getters.currentStorehouse.id
      if (this.moreSearchVisible) {
        queryParam.condition = that.search.condition
      } else {
        queryParam.condition = {
          lotNo1: that.search.condition.lotNo1,
          houseId: this.$store.getters.currentStorehouse.id
        }
      }
      // 分页
      queryParam.current = this.search.current
      queryParam.size = this.search.size
      this.listLoading = true
      stockAPI.getStockInitList(queryParam).then(result => {
        if (result.code === 0) {
          this.preparationList = result.data.records
          this.search.total = result.data.total
          that.listLoading = false
        }
      })
    },
    reset() {
      this.search.current = 1
      this.search.size = 10
      this.search.condition = {
        lotNo1: null,
        ownerId: null,
        styleName: null
      }
      this.list()
    },
    moreClick() {
      this.moreSearchVisible = !this.moreSearchVisible
    },
    selected(data) {
      this.tableData = data.results
      this.tableHeader = data.header
    },
    importData() {
      this.dialogVisible = true
    },
    confirmImport() {
      // 确定导入  转换列名字
      const data = {
        header: this.tableHeader,
        rows: this.tableData
      }
      this.importLoading = true
      stockAPI.importStockInit(data).then(result => {
        if (result.code === 0) {
          this.tableHeader = result.data.header
          this.tableData = result.data.rows
        } else {
          this.$message({
            title: '错误提示',
            message: result.message,
            type: 'error',
            duration: 2000
          })
        }
        this.importLoading = true
      })
    },
    handleClose() {
      // 关闭
      this.dialogVisible = false
      this.tableData = []
      this.tableHeader = []
      this.list()
    },
    handleSizeChange(val) {
      // 分页size变化
      this.search.size = val
      this.list()
    },
    handleCurrentChange(val) {
      // 分页当前页变化
      this.search.current = val
      this.list()
    },
    checkData() {
      this.$notify({
        title: '警告',
        message: '开发中.....',
        type: 'warn',
        duration: 2000
      })
    }
  }
}
</script>
<style scoped>

</style>
